<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>




</head>
<body>

<el-container id="app">
    <el-header>
        <el-row>
            <el-col :span="3"><img src="../static/images/logo.png"/> </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="1"></div><el-link type="primary" href="#">首页</el-link></el-col>
            <el-col :span="2"></div><el-link type="primary" href="#">经典文学</el-link></el-col>
            <el-col :span="2"></div><el-link type="primary" href="#">通俗小说</el-link></el-col>
            <el-col :span="2"></div><el-link type="primary" href="#">计算机</el-link></el-col>
            <el-col :span="2"></div><el-link type="primary" href="#">杂志期刊</el-link></el-col>
            <el-col :span="8"></el-col>
            <el-col :span="3">
                <div v-if="!isLogined">
                    <el-button type="primary" round @click="showLogWin()"> 登录 </el-button>
                    <el-button type="primary" round @click="showRegWin()"> 注册 </el-button>

                </div>

                <div v-else>
                    <el-dropdown>
                        <el-avatar
                                src="avatars"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-setting"
                            ><label @click="setting()">个人资料</label>
                            </el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-close"
                            ><label @click="exit()">注销</label>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>

        <el-row>

        </el-row>

        <el-dialog title="登录对话框" :visible.sync="isLogWin">
            <el-form :model="logForm">
                <el-form-item label="用户名">
                    <el-input v-model="logForm.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="logForm.pass" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="loginAjax()"> 确定 </el-button>
            </div>
        </el-dialog>

        <el-dialog title="注册对话框" :visible.sync="isRegWin"></el-dialog>

        <el-dialog title="上传对话框" :visible.sync="isUpLoadWin"></el-dialog>
    </el-header>


    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
</el-container>

</body>


<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script type="text/javascript" rel="/ebook/static/js/vue.js"></script>-->



<script>
    var vm = new Vue({
    el:"#app",
    data:{
         isLogined:false,
         isRegWin:false,
         isLogWin:false,
         isUpLoadWin:false,
         logForm:{
             name:'',
             pass:''
         },
         avatars: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        },
    methods:{
        showLogWin(){
            this.isLogWin = true;
        },
        showRegWin(){
            this.isRegWin = true;
        },
        loginAjax(){
            this.isLogWin = false;
                axios.post("/users/login",{
                    userCode:this.logForm.name,
                    userPassword:this.logForm.pass
                }).then( (resp) => {
                    if (resp.data.code == 1001){
                        this.isLogined = true;
                        this.avatars = "/static/images/avatars/04060" + resp.data.data.avatarNum + ".jpg";
                        console.log(resp.data.data);
                    }else {
                        console.log(resp.data.data)
                    }

                }).catch( (error) => {

                });
            },
        exit(){

            axios.get("/users/logout").then((resp) => {
                if (resp.data.code == 1007)
                this.isLogined = false;
            }).catch();
        }
        }
    });
</script>
</html>